<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { $MedicalRecord } from '@/api/medicalrecord'

const medicalRecord = ref({
    age: 0,
    allergy: '',
    department: '',
    diagnos: '',
    drugUse: '',
    opinion: '',
    doctorName: '',
    time: ''
})

onMounted(() => {
    $MedicalRecord({
        id: sessionStorage.getItem('id')
    }).then(res => {
        medicalRecord.value = res.data
    })
})
</script>

<template>
    <div class="medical-record">
        <div class="record-top">
            <span>电子病历</span>
        </div>
        <div class="record-bottom">
            <div class="record-bottom-body">
                <div class="record-bottom-body-top">
                    <span>门诊病历</span>
                </div>
                <div class="record-bottom-body-info">
                    <div class="record-bottom-body-info-item">
                        <div class="record-bottom-body-info-name">姓名：<span>哈哈哈</span></div>
                        <div class="record-bottom-body-info-sex">性别：<span>男</span></div>
                        <div class="record-bottom-body-info-age">年龄：<span>{{ medicalRecord.age }}岁</span></div>
                    </div>
                    <div class="record-bottom-body-info-item">
                        <div class="record-bottom-body-info-department">科室：<span>{{ medicalRecord.department }}</span>
                        </div>
                        <div class="record-bottom-body-info-allergy">药物过敏史：<span>{{ medicalRecord.allergy }}</span>
                        </div>
                    </div>
                </div>
                <div class="record-bottom-body-diagnosis">
                    病情诊断：<span>{{ medicalRecord.diagnos }}</span>
                </div>
                <div class="record-bottom-body-drug-use">
                    药物治疗：<span>{{ medicalRecord.drugUse }}</span></div>
                <div class="record-bottom-body-opinion">
                    医师意见：<span>{{ medicalRecord.opinion }}</span>
                </div>
                <div class="record-bottom-body-bottom">
                    <span>医生签名：{{ medicalRecord.doctorName }}</span>
                    <span>就诊日期：{{ medicalRecord.time }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.medical-record {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 110vh;
    color: #333;

    .record-top {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 0.5vw;
        padding-left: 3vw;
        margin-bottom: 2vh;
        border: 0.1vw solid #ccccccba;

        span {
            font-size: 1.2vw;
            font-weight: 800;
            line-height: 3vh;
            padding-left: 2vw;
            border-left: 0.5vw solid #45c998;
        }
    }

    .record-bottom {
        flex: 12;
        display: flex;
        justify-content: center;
        border-radius: 0.5vw;
        background-color: #f5f5f5;
        border: 0.1vw solid #ccccccba;

        .record-bottom-body {
            display: flex;
            flex-direction: column;
            width: 40vw;
            margin-top: 5vh;

            .record-bottom-body-top {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 9vh;
                font-size: 2vw;
                background-color: #fff;
                border-bottom: 0.1vw solid #000;
            }

            .record-bottom-body-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 12vh;
                border-bottom: 0.1vw solid #000;
                background-color: #fff;
                padding: 0 1vw;

                .record-bottom-body-info-item {
                    display: flex;
                    font-size: 1.2vw;
                    margin: 1vh 0;

                    .record-bottom-body-info-name,
                    .record-bottom-body-info-sex,
                    .record-bottom-body-info-department {
                        margin-right: 8vw;
                    }
                }
            }

            .record-bottom-body-diagnosis,
            .record-bottom-body-drug-use,
            .record-bottom-body-opinion {
                display: flex;
                height: 18vh;
                font-size: 1.1vw;
                background-color: #fff;
                padding: 1vw;

                span {
                    width: 32vw;
                }
            }

            .record-bottom-body-bottom {
                display: flex;
                height: 10vh;
                justify-content: space-between;
                padding: 1vw;
                background-color: #fff;
                font-size: 1.1vw;
                border-top: 0.1vw solid #000;
            }
        }
    }
}
</style>